import React from 'react';
import styles from './index.module.scss'
import { Flex } from 'antd-mobile';
import { Link } from 'react-router-dom'
import classNames from 'classnames'


/*
* className: 自定义样式, 如果部分样式不一致, 可以进行自定义 然后再通过参数传进来
*/
export default function SearchBar({ cityName, className }) {
    return (
        <Flex className={classNames(styles.root, className)}>
            <Flex className={styles.searchLeft}>
                <div className={styles.location}>
                    <Link to="/city">
                        <span>{cityName}</span>
                        <i className="iconfont icon-arrow"></i>
                    </Link>
                </div>
                <div className={styles.searchForm}>
                    <i className="iconfont icon-search"></i>
                    <span>请输入小区或地址</span>
                </div>
            </Flex>
            <Link to="/map">
                <i className="iconfont icon-map"></i>
            </Link>
        </Flex>
    )
}
